import React, { Component } from 'react';

import { modalError, messageError } from 'utils/feedbacks';

import { 
  Form, 
  Input, 
  Spin, 
  Select, 
  Modal, 
  Radio,
} from 'antd';

import styles from './index.css';

const { TextArea } = Input;

/**
 * 白名单管理:新增
 */
class Index extends Component {
  state = {
    selectedRadio: 'ON' // 单选框默认选中启用
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { modalState: { visible }, loading } = this.props;

    return (
      <Modal
        title="新增"
        visible={visible}
        wrapClassName={styles.choise_modal}
        closable={false}
        maskClosable={false}
        destroyOnClose={true}
        onCancel={this.formCanceledHandler}
        onOk={this.formSubmittedHandler} >
        <Spin spinning={!!loading} size="large" tip="新增中, 请稍后...">
          <Form className={styles.lesson_form}>
            <Form.Item label='FTP地址:'>
              {
                getFieldDecorator('url', {
                  // 禁止用户输入空格
                  getValueFromEvent: event => event.target.value.replace(/[\u4e00-\u9fa5]/g,''),

                  // 校验规则
                  rules: [
                    { required: true, message: 'FTP地址不能为空!' },
                    { pattern: /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/ , message: 'FTP地址格式错误'}
                  ],
                })
                  (
                    <Input type="text" allowClear placeholder="请输入FTP地址"/>
                  )
              }
            </Form.Item>
            <Form.Item label='账号:'>
              {
                getFieldDecorator('account', {
                  // 禁止用户输入空格
                  getValueFromEvent: event => event.target.value.replace(/[\u4e00-\u9fa5]/g,''),
                  // 校验规则
                  rules: [
                    { required: true, message: '账号不能为空!' },
                    // { pattern: /[\u4e00-\u9fa5]/g, message: '' },
                  ],
                })
                  (
                    <Input type="text" allowClear placeholder='请输入账号,不得输入中文' maxLength={100} />
                  )
              }
            </Form.Item>
            <Form.Item label='密码:'>
              {
                getFieldDecorator('password', {
                  // 禁止用户输入空格
                  getValueFromEvent: event => event.target.value.replace(/[\u4e00-\u9fa5]/g,''),

                  // 校验规则
                  rules: [
                    { required: true, message: '密码不能为空!' },
                    // { pattern: /[\u4e00-\u9fa5]/g, message: ''}
                  ],
                })
                  (
                    <Input.Password placeholder="input password" allowClear placeholder='请输入密码' maxLength={100} />
                  )
              }
            </Form.Item>
            <Form.Item label='状态'>
              {
                getFieldDecorator('status', {
                  initialValue: this.state.selectedRadio,
                  rules: [
                    { required: true, message: '状态不能为空!' },
                  ],
                })
                (
                  <Radio.Group onChange={this.statusChangedHandler}>
                    <Radio value="ON">启用</Radio>
                    <Radio value="OFF">禁用</Radio>
                  </Radio.Group>
                )
              }
            </Form.Item>
            <Form.Item label='备注'>
              {
                getFieldDecorator('remark', {
                })
                (
                  <TextArea rows={4} placeholder="请输入备注"/>
                )
              }
            </Form.Item>
          </Form>
        </Spin>
      </Modal>
    )
  }

  /**
   * 单选框状态改变事件
   */
  statusChangedHandler = e => {
    this.setState({
      selectedRadio: e.target.value,
    });
  };

  /**
   * 关闭按钮点击事件
   */
  formCanceledHandler = () => {
    !!this.props.onCancel && this.props.onCancel();
  }

  /**
   * 数据验证成功后回调事件
   */
  formSubmittedHandler = (event) => {
    // 关闭表单的默认提交行为
    event.preventDefault();

    const { form } = this.props;
    form.validateFields((error) => {
      // 验证有错, 则自然报错
      if(!!error) return;

      // 如果校验没错, 则收集表单数据, 提交
      const fieldsValue = form.getFieldsValue();
      !!this.props.onConfirm && this.props.onConfirm(fieldsValue);
    });

    
    
    // // 整理表单数据
    // const inputJSON = {};
    // // ip地址
    // Object.assign(inputJSON, { address })
    // // 账号
    // Object.assign(inputJSON, { accountNum })
    // // 密码
    // Object.assign(inputJSON, { password })
    // // 备注
    // const remarks = !!fieldsValue['remarks']? fieldsValue['remarks'] : '';
    // Object.assign(inputJSON, { remarks })
    // // 创建时间
    // const d=new Date();
    // const year=d.getFullYear();
    // const month=change(d.getMonth()+1);
    // const day=change(d.getDate());
    // const hour=change(d.getHours());
    // const minute=change(d.getMinutes());
    // const second=change(d.getSeconds());
    // function change(t){
    //   if(t<10){
    //    return "0"+t;
    //   }else{
    //    return t;
    //   }
    // }
    // const gmtCreate = year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
    // Object.assign(inputJSON, { gmtCreate })
    // !!this.props.onConfirm && this.props.onConfirm(inputJSON);
  }

}

export default Form.create ({}) (Index);